<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>股东减持</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="./plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./css/main.css">
</head>
<body>
  <div class="content">
    <div class="box-noshadow">
      <div class="box-header">
        <div class="header-title">重要股东二级市场交易</div>
      </div>
      <div class="box-body">
        <select class="form-control" style="margin-bottom:10px;">
          <option>1日</option>
          <option>2日</option>
          <option>3日</option>
          <option>4日</option>
          <option>5日</option>
        </select>
        <select class="form-control" style="margin-bottom:10px;">
          <option>1日</option>
          <option>2日</option>
          <option>3日</option>
          <option>4日</option>
          <option>5日</option>
        </select>
        <div class='chart' id="line" style="height:300px;"></div>
        <table class="table" style="margin-top:20px;">
          <thead>
            <tr>
              <th scope="col">公告日期</th>
              <th scope="col">股东名称</th>
              <th scope="col">是否实际控制人</th>
              <th scope="col">职务</th>
              <th scope="col">变动方向</th>
              <th scope="col">变动数量（万股）</th>
              <th scope="col">变动数量占流通股比（%）</th>
              <th scope="col">大宗交易（万股）</th>
              <th scope="col">变动后持流通股数量（万股）</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>2020-07-21</td>
              <td>刘歆艺</td>
              <td>否</td>
              <td>股东董事</td>
              <td>增持</td>
              <td>5.60</td>
              <td>0.0002%</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>2020-07-21</td>
              <td>刘歆艺</td>
              <td>否</td>
              <td>股东董事</td>
              <td>增持</td>
              <td>5.60</td>
              <td>0.0002%</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>2020-07-21</td>
              <td>刘歆艺</td>
              <td>否</td>
              <td>股东董事</td>
              <td>增持</td>
              <td>5.60</td>
              <td>0.0002%</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>2020-07-21</td>
              <td>刘歆艺</td>
              <td>否</td>
              <td>股东董事</td>
              <td>增持</td>
              <td>5.60</td>
              <td>0.0002%</td>
              <td>-</td>
              <td>-</td>
            </tr>
            <tr>
              <td>2020-07-21</td>
              <td>刘歆艺</td>
              <td>否</td>
              <td>股东董事</td>
              <td>增持</td>
              <td>5.60</td>
              <td>0.0002%</td>
              <td>-</td>
              <td>-</td>
            </tr>
            
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="plugins/jquery/jquery.min.js"></script>
  <script src="js/echarts.js"></script>
  <script>
    $(function() {
      var myChart = echarts.init(document.getElementById('line'))
      var colorList = ["#2B9DF8", '#FBB969', '#F36154', '#3EC3CE', '#B1C5D4', '#705AFC', '#4363DA', '#00E574']
      var xData = ['2020/01', '2020/02', '2020/03', '2020/04', '2020/05', '2020/06', '2020/07']
      var option = {
        color:colorList,
        legend: {
          show:false,
          icon: 'circle',
          bottom: '5%',
          right: 'center',
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: '#556677'
          }
        },
        tooltip: {
          trigger: 'axis',
          
          axisPointer: {
            lineStyle: {
              width: 1,
              color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0,
                      color: '#2B9DF8' // 0% 处的颜色
                  },{
                      offset: 1,
                      color: '#2B9DF8' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
              }
            },
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#BDD8E9',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          left:'3%',
          right:'3%',
          top: '5%',
          bottom:'20%'
        },
        xAxis: [{
          type: 'category',
          data: xData,
          axisLine: { //  改变x轴颜色
            lineStyle: {
              color: '#DBDBDB 100%',
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: "#dfdfdf",
              fontSize: 12
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#DBDBDB 100%'],
              width: 1,
              type: 'solid'
            }
          },
          boundaryGap: false
        }],
        yAxis: [{
          type: 'value',
          max: 100,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(107,107,107,0.37)', //y轴颜色
            }
          },
          axisLabel: {
            formatter: '{value} %',
            textStyle: {
              color: "#4d4d4d",
              fontSize: 12
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ecf2f2'],
              width: 1,
              type: 'solid'
            }
          }
        }],
        series: [{
          name: '上证指数',
          type: 'line',
          data: [100, 10, 90, 12, 49, 3, 7],
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 2,
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0.5,
                color: 'rgba(43,157,248,0.52)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(61,126,235,0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }, {
          name: '浦发指数',
          type: 'line',
          data: [50, 12, 21, 14, 95, 16, 10],
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          yAxisIndex: 0,
          showSymbol: false,
          lineStyle: {
            width: 2,
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0.5,
                color: 'rgba(251,185,105,0.8)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(61,126,235,0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
          
        }]
      };

      myChart.setOption(option)
      // 把echart实例追加到最外层window上
      window.top.chartsList && window.top.chartsList.push(myChart)
    })
  </script>
</body>
</html>